<template>
  <view class="cart_good_item">
    <image class="cart_good_img" :src="item.goodsBO.coverUrl[0]"></image>
    <view class="cart_good_bot">
      <view class="cart_good_name">
        {{ item.goodsBO.title }}
      </view>
      <view class="cart_good_remark">
        {{ item.remark }}
      </view>
      <view class="cart_good_price">
        ￥
        <text class="cart_good_text">{{ item.goodsBO.price }}</text>
      </view>
    </view>
    <view class="cart_good_counts">
      <wd-input-number v-model="item.goodsCount" @change="change" :min="0" />
    </view>
  </view>
</template>

<script lang="ts" setup>
import { toast } from '@/utils/uniapi';
import { api } from '@/api/store_api';
const props = defineProps(['item']);
const emit = defineEmits(['cart']);
function change(e: any) {
  uni.showLoading({ title: '加载中' });
  const { value } = e;
  const id = props.item.id;
  if (value === 0) {
    deleteItem(id);
  } else {
    updateItem(id, value);
  }
}
async function deleteItem(itemId: any) {
  const res = await api.eletcai({ id: [itemId] });
  if (res.respCode !== 200) {
    toast(res.msg);
  }
  uni.hideLoading();
  emit('cart');
}
async function updateItem(id: any, goodsCount: any) {
  const res = await api.editcart({ id, goodsCount });
  if (res.respCode !== 200) {
    toast('修改失败请稍后重试');
  }
  uni.hideLoading();
  emit('cart');
}
</script>

<style>
.cart_good_item {
  width: 100%;
  padding: 0 12rpx;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  padding-bottom: 10rpx;
  border-bottom: 2rpx dashed #ebebf0;
}
.cart_good_img {
  width: 100rpx;
  height: 100rpx;
  border-radius: 16rpx;
}
.cart_good_bot {
  margin-left: 16rpx;
}
.cart_good_name {
  font-size: 28rpx;
  font-weight: 400;
  color: #28282b;
}
.cart_good_remark {
  font-size: 20rpx;
  font-weight: 400;
  color: #999999;
}
.cart_good_price {
  font-size: 24rpx;
  font-weight: 400;
  color: #ba2636;
}
.cart_good_price .cart_good_text {
  font-size: 36rpx;
}
.cart_good_counts {
  margin-left: auto;
}
</style>
